<template>
	<view class="invite_page">
		<view class="head">
			<view class="left" @click="back"><uni-icons color="black" size="24" type="left" /></view>
			<view class="title"></view>
			<view></view>
		</view>

		<canvas class="canvas" canvas-id="canvas" @error="canvasIdErrorCallback"></canvas>

		<view class="save" @click="save">确定</view>
	</view>
</template>
<script>
const systemInfo = uni.getSystemInfoSync();
export default {
	data() {
		return {
			canvasSize: null,
			context: null,
			userInfo: {
				nickName: "小明",
				inviteCode: "535SDF",
			},
		};
	},

	async mounted() {
		this.canvasSize = await this.getCanvas();
		this.context = uni.createCanvasContext("canvas", this);
		await this.drawBg();
		await this.drawUserName();
		await this.drawUserAvatar();
		await this.drawQrBox();
		await this.drawQrCode();
		await this.drawUserInviteCode();
	},

	methods: {
		getHeightDiff(size) {
			const width = systemInfo.windowWidth;
			const scale = width / 750;
			return size * scale;
		},
		getCanvas() {
			return new Promise((resolve) => {
				const query = uni.createSelectorQuery().in(this);
				query
					.select(".canvas")
					.boundingClientRect((data) => {
						// console.log("得到布局位置信息" + JSON.stringify(data));
						// console.log("节点离页面顶部的距离为" + data.top);
						resolve({
							width: data.width,
							height: data.height,
						});
					})
					.exec();
			});
		},
		drawBg() {
			const { width, height } = this.canvasSize;
			const context = this.context;
			return new Promise((resolve, reject) => {
				uni.downloadFile({
					url: "http://qiniu.relaverse.cn/icon/invite_main.png",
					success(res) {
						context.drawImage(res.tempFilePath, 0, 0, width, height);
						context.draw(true);
						setTimeout(() => {
							resolve(true);
						}, 250);
					},
					fail(err) {
						reject(err);
					},
				});
			});
		},

		drawUserAvatar() {
			const context = this.context;
			const left = this.getHeightDiff(500);
			const top = this.getHeightDiff(60);
			const width = this.getHeightDiff(160);

			return new Promise((resolve, reject) => {
				uni.downloadFile({
					url: "https://cdn3.relaverse.cn/uploads/images/0401/1648782124000bfd2.png",
					success(res) {
						context.drawImage(res.tempFilePath, left, top, width, width);
						context.draw(true);
						setTimeout(() => {
							resolve(true);
						}, 250);
					},
					fail(err) {
						reject(err);
					},
				});
			});
		},

		drawUserName() {
			const context = this.context;
			const left = this.getHeightDiff(40);

			return new Promise((resolve) => {
				context.setFontSize(this.getHeightDiff(44));
				context.setFillStyle("black");
				context.fillText(this.userInfo.nickName, left, this.getHeightDiff(120));
				context.draw(true);

				context.setFontSize(this.getHeightDiff(28));
				context.setFillStyle("rgba(0,0,0,0.8)");
				context.fillText("已赠送您100元气碎片", left, this.getHeightDiff(180));
				context.fillText("扫描下方二维码注册即刻领取！", left, this.getHeightDiff(220));
				context.draw(true);
				setTimeout(() => {
					resolve(true);
				}, 250);
			});
		},

		drawQrBox() {
			const context = this.context;
			const { height, width } = this.canvasSize;

			return new Promise((resolve) => {
				// 左上角坐标 (x1, y1) 和右下角坐标 (x2, y2)
				const x1 = this.getHeightDiff(40); // 左上角 x 坐标
				const y1 = this.getHeightDiff(260); // 左上角 y 坐标
				const x2 = width - this.getHeightDiff(40); // 右下角 x 坐标
				const y2 = height - this.getHeightDiff(60); // 右下角 y 坐标
				const radius = this.getHeightDiff(40); // 圆角半径

				console.log(x1, y1, x2, y2, radius);

				// 创建渐变
				// background: linear-gradient(180deg, rgba(30, 0, 255, 0.16) 0%, rgba(45, 153, 255, 0.8) 100%);
				// backdrop-filter: blur(10px)
				const gradient = context.createLinearGradient(x1, y1, x1, y2);
				gradient.addColorStop(1, "rgba(45, 153, 255, 0.8)"); // 渐变结束颜色
				gradient.addColorStop(0, "rgba(30, 0, 255, 0.16)"); // 渐变起始颜色

				// 绘制圆角矩形
				context.beginPath();

				context.moveTo(x1 + radius, y1); // 左上角的圆角
				context.lineTo(x2 - radius, y1); // 上边
				context.arcTo(x2, y1, x2, y2 - radius, radius); // 右上角
				context.lineTo(x2, y2 - radius); // 右边
				context.arcTo(x2, y2, x1 + radius, y2, radius); // 右下角
				context.lineTo(x1 + radius, y2); // 下边
				context.arcTo(x1, y2, x1, y1 + radius, radius); // 左下角
				context.lineTo(x1, y1 + radius); // 左边
				context.arcTo(x1, y1, x1 + radius, y1, radius); // 左上角
				context.closePath();

				// 填充渐变
				context.globalAlpha = 5;
				context.fillStyle = gradient;
				context.fill();

				// 绘制完成
				context.draw(true);

				setTimeout(() => {
					resolve(true);
				}, 250);
			});
		},

		drawQrCode() {
			const context = this.context;
			const top = this.getHeightDiff(340);
			const left = this.getHeightDiff(200);
			const size = this.getHeightDiff(300);
			console.log(top, left, size);

			return new Promise((resolve, reject) => {
				uni.downloadFile({
					url: "http://qiniu.relaverse.cn/icon/inviteQr.png",
					success(res) {
						context.drawImage(res.tempFilePath, left, top, size, size);
						context.draw(true);
						setTimeout(() => {
							resolve(true);
						}, 250);
					},
					fail(err) {
						reject(err);
					},
				});
			});
		},

		drawUserInviteCode() {
			const { height } = this.canvasSize;
			const context = this.context;
			const left = this.getHeightDiff(148);

			return new Promise((resolve) => {
				// 设置阴影
				context.shadowColor = "rgba(0, 0, 0, 0.5)"; // 阴影颜色
				context.shadowOffsetX = 2; // 阴影水平偏移
				context.shadowOffsetY = 2; // 阴影垂直偏移
				context.shadowBlur = 5; // 阴影模糊程度

				// context.font = `bold`;
				context.setFontSize(this.getHeightDiff(52));
				context.setFillStyle("white");
				context.fillText("邀请码：" + this.userInfo.inviteCode, left, height - this.getHeightDiff(120));
				context.draw(true);
				setTimeout(() => {
					resolve(true);
				}, 250);
			});
		},

		back() {
			uni.navigateBack();
		},

		canvasIdErrorCallback(e) {
			console.error(e.detail.errMsg);
		},

		save() {
			uni.canvasToTempFilePath({
				x: 0,
				y: 0,
				width: this.canvasSize.width,
				height: this.canvasSize.height,
				destWidth: this.canvasSize.width * systemInfo.devicePixelRatio,
				destHeight: this.canvasSize.height * systemInfo.devicePixelRatio,
				canvasId: "canvas",
				success: function (res) {
					// 在H5平台下，tempFilePath 为 base64
					console.log(res.tempFilePath);

					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: function (res) {
							uni.showToast({
								title: "保存成功",
							});
						},
					});
				},
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.invite_page {
	width: 100vw;
	height: 100vh;
	padding: var(--status-bar-height) 30rpx;
	background-image: url("http://qiniu.relaverse.cn/icon/invite_bg.png");
	background-size: 100% 100%;
	background-repeat: repeat;
	background-position: center;
	position: relative;

	.head {
		width: 100%;
		padding: 0 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 8rpx;

		view {
			flex: 1;
		}

		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: black;
			text-align: center;
		}

		.left {
			text-align: left;
		}
	}

	.canvas {
		width: 100%;
		height: 872rpx;
		border-radius: 20rpx;
		margin-top: 80rpx;
		// border: 1px solid black;

		box-shadow: 0px 4rpx 40rpx 0px #2d99ffb2;
	}

	.save {
		position: absolute;
		left: 50%;
		bottom: 140rpx;
		transform: translateX(-50%);
		width: 684rpx;
		height: 96rpx;
		line-height: 96rpx;
		color: white;
		background-color: #2d99ff;
		border-radius: 20rpx;
		text-align: center;
		font-size: 40rpx;
		font-weight: 500;
	}
}
</style>
